<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选效果</title>
		<style type="text/css">
			img {
				vertical-align: middle;
			}
		</style>
		<script type="text/javascript">
			function selectAll() {
				var ar = document.getElementsByName("product");
				var br = document.getElementsByName("all");
				if(br[0].checked){
					for(let a of ar){
						a.checked=true;
					}
				}else{
					for(let a of ar){
						a.checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="d5">
			<input type="checkbox" name="all" onclick="selectAll()" />全选
		</div>
		<div id="d1">
			<input type="checkbox" name="product" />
			<img src="image/list0.jpg">
		</div>
		<div id="d2">
			<input type="checkbox" name="product" />
			<img src="image/list0.jpg">
		</div>
		<div id="d3">
			<input type="checkbox" name="product" />
			<img src="image/list0.jpg">
		</div>
		<div id="d4">
			<input type="checkbox" name="product" />
			<img src="image/list0.jpg">
		</div>
		<!-- <input type="button" value="全选" onclick="selectAll()" /> -->
	</body>
</html>
